import React, { Component } from 'react';
import { connect } from 'react-redux'
import {Form, Input,Select ,DatePicker ,Table,Button,TreeSelect,  Popconfirm,Row,Col,
  InputNumber} from 'antd';

import moment from 'moment';
// 推荐在入口文件全局设置 locale
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const Option=Select.Option;
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;

const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 15 },
};

var _this;

class SearchModal extends Component {

  constructor(props) {
    super(props);
  }

  handleAdvancedSearchSubmit=()=>{
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });
  }

  hideShow =()=>{
    this.props.hideShow();
  }

  handleClear = ()=>{
    this.props.form.resetFields();
  }

  getSelectOption = (str) => {
    var list = str.split(",");
    return list.map((d,index)=>(<Option key={index} value={d}>{d}</Option>))
  }

  getallForm = (list)=>list.map((d,index)=>(
    <div key={index}>
      <div style={{fontSize: 14,color: "#333", }}>{d.name}</div>
      <div style={{marginBottom: 10,borderBottom: '1px solid #e9e9e9'}}></div>
      <Row>
        {_this.getFormItemList(d.attrList)}
      </Row>
    </div>
  ))

  getFormItemList = (list) => list.map((d,index)=>(
    <Col key={index} span={4}>
      {_this.getSwitchItem(d)}
    </Col>
  ))

  getSwitchItem = (item) => {
    switch(item.type){
      case 1:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_)(<Input />)
              }
            </FormItem>
        )
      case 2:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_)(<InputNumber style={{width: "100%"}}/>)
              }
            </FormItem>
        )
      case 3:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_)(<Input.TextArea />)
              }
            </FormItem>
        )
      case 4:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_)(
                  <Select>
                    {_this.getSelectOption(item.options)}
                  </Select>
                )
              }
            </FormItem>
        )
      case 5:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_)(<DatePicker format="YYYY-MM-DD" showToday/>)
              }
            </FormItem>
        )
      default:
        return null;
    }
  }

  render() {
    const { children, dispatch,assetData,typeAttrs,form} = this.props;
    const { getFieldDecorator} = this.props.form;  
    _this = this;
  
    const show=this.props.visible?{display:'block'}:{display:'none'};
    return (
         <div style={show}>
            <div style={{minHeight:'100%'}}>
             <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px', paddingRight:'20px'}}>
                <Form onSubmit={this.handleAdvancedSearchSubmit}>             
                  {_this.getallForm(typeAttrs)}
                <Row type="flex" justify="start">
                  <Col span={12} offset={12} style={{ textAlign: 'right' }}>
                    <Button type="primary" size='large' htmlType="submit">搜索</Button>
                    &nbsp;
                    <Button type="primary" size='large' onClick={this.handleClear}>清除条件</Button>
                    &nbsp;
                    <Button type="primary" size='large' onClick={this.hideShow}>返回</Button>
                  </Col>
                </Row>
                </Form>
            </div>
            </div>
        </div>
    );
  }
}

export default Form.create()(SearchModal)
